<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="myMap" style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude"
					:markers="markers" show-location enable-scroll @tap="bindtap" @callouttap="callouttap"
					@regionchange="regionchange" @updated="updated">
				</map>
			</view>
			<view class="store-tips">
				<cover-view class="store-des-box" v-if="storeFlag" @tap="storeDesEvn">
					<cover-image class="store-img" src="../../static/hch-position/1.jpg"></cover-image>
					<cover-view class="store-des">
						<cover-view class="store-name">{{store.name}}</cover-view>
						<cover-view class="store-address">地址:{{store.address}}</cover-view>
						<cover-view class="store-tel">电话:{{store.tel}}</cover-view>
					</cover-view>
				</cover-view>
				<!-- <cover-image v-if="storeAdFlag" class="store-ad" src="../../static/hch-position/ad.jpg"></cover-image>
				<cover-image v-if="storeAdFlag" class="store-clear" @tap="hideAd"
					src="../../static/hch-position/clear.png"></cover-image> -->
			</view>
			<!-- <cover-view class="near-num">距离最近的门店{{distanceL}}千米</cover-view> -->
			<cover-image class="address-icon" src="../../static/hch-position/定位.png"></cover-image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			storeData: {
				type: Array,
				default: [{
						id: 1,
						name: "门店1号",
						address: "厦门市思明区汇景商业广场XXX1号",
						tel: "12345678900"
					},
					{
						id: 2,
						name: "门店2号",
						address: "厦门市思明区汇景商业广场XXX2号",
						tel: "12345678900"
					}
				]
			},
			markers: {
				type: Array,
				default: [{
						id: 1,
						latitude: 24.4483294023427,
						longitude: 118.08479034393311,
						iconPath: "../../static/hch-position/门店.png",
						callout: {
							content: "门店1号店",
							borderRadius: 10,
							padding: 5,
							display: "ALWAYS"
						}
					},
					{
						id: 2,
						latitude: 24.4483294023427,
						longitude: 118.08479034393311,
						iconPath: "../../static/hch-position/门店.png",
						callout: {
							content: "门店2号店",
							borderRadius: 10,
							padding: 10,
							display: "ALWAYS"
						}
					}
				]
			}
		},
		data() {
			return {
				store: {},
				storeFlag: false,
				storeAdFlag: true,
				distanceL: 0, //附近店门的距离
				latitude: 39.909,
				longitude: 116.39742,
				controls: []
			}
		},
		methods: {
			// 点击了门店信息
			storeDesEvn() {
				uni.navigateTo({
					url: '/pages/refuelNearby/refuelDetails/refuelDetails'
				})
				uni.showToast({
					title: "自己自定义跳门店详情页介绍",
					duration: 2000,
					icon: "none"
				})
			},
			// 点击气泡
			callouttap(e) {
				this.storeFlag = true
				this.storeAdFlag = false
				for (let i = 0; i < this.storeData.length; i++) {

					const ele = this.storeData[i]
					if (ele.id == e.detail.markerId) {
						this.store = ele
						break
					}
				}
			},
			// 点击地图
			bindtap(id) {
				this.storeFlag = false
				// this.storeAdFlag=true;
			},
			// 隐藏广告图片
			hideAd() {
				this.storeAdFlag = false
			},
			updated() {
				let _this = this
				wx.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.nearDistance(_this.markers, _this.latitude, _this.longitude)
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			// 改变视野时改变经纬度
			regionchange(e) {
				let _this = this
				// 使用 wx.createMapContext 获取 map 上下文 this必须要写 不然没办法得到回调！！！！。
				var mapCtx = wx.createMapContext("myMap", this)
				mapCtx.getCenterLocation({
					success: function(res) {
						_this.centerLatitude = res.latitude
						_this.centerLongitude = res.longitude
						_this.nearDistance(
							_this.markers,
							_this.centerLatitude,
							_this.centerLongitude
						)
					},
					fail: function(res) {
						console.log(res)
					}
				}) //获取当前地图的中心经纬度
			},
			// 两点间距离
			distance(la1, lo1, la2, lo2) {
				var La1 = (la1 * Math.PI) / 180.0
				var La2 = (la2 * Math.PI) / 180.0
				var La3 = La1 - La2
				var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
				var s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(La3 / 2), 2) +
							Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
						)
					)
				s = s * 6378.137 //地球半径
				s = Math.round(s * 10000) / 10000
				return s
			},
			// 计算最近的距离
			nearDistance(array, centerLatitude, centerLongitude) {
				let temp = []
				for (let i = 0, l = array.length; i < l; i++) {
					const element = array[i]
					let d = this.distance(
						element.latitude,
						element.longitude,
						centerLatitude,
						centerLongitude
					)
					temp.push(d)
				}
				this.distanceL = Math.min.apply(null, temp)
			}
		},
		onShow() {},
		onReady() {}
	}
</script>

<style lang="scss" scoped>
	.page-body {
		position: relative;
	}

	.content {
		text-align: center;
		height: 400rpx;
	}

	.page-section {
		z-index: 0;
	}

	.store-tips {
		position: absolute;
		width: 600rpx;
		height: 100rpx;
		margin: 10rpx auto;
		border-radius: 10rpx;
		position: absolute;
		top: 10rpx;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 2;
		overflow: hidden;

		.store-des-box {
			background: #fff;
		}

		.store-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin: 10rpx;
			float: left;
		}

		.store-des {
			padding-top: 8rpx;
			float: left;
			line-height: 1;
			font-size: 22rpx;
			color: #666;
			padding-left: 20rpx;

			.store-name {
				font-weight: 600;
				color: deeppink;
			}
		}

		.store-clear {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 7rpx;
			right: 7rpx;
			margin: 30rpx;
		}
	}

	.address-icon {
		width: 38rpx;
		height: 40rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;
		margin-bottom: -20rpx;
		margin-left: -20rpx;
	}

	.near-num {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>